<template>
  <div class="table1">
    <div class="btn-wrap">
      <a-button type="primary" style="margin-right: 15px;" @click="onEditForm()">编辑</a-button>
      <a-button type="info" @click="download">导出</a-button>
    </div>
    <a-modal width="580px" :title="addFormTitle" :visible="addFormVisible" @ok="onAddSubmit" @cancel="onAddFormCancel">
      <a-form-model ref="addForm" :model="addForm" :label-col="{span: 4}" :wrapper-col="{span: 20}">

        <a-form-model-item label="活动内容" prop="activityContent"
          :rules="{required: true, message: '请输入活动内容', trigger: ['change']}">
          <a-textarea v-model="addForm.activityContent" :auto-size="{ minRows: 6, maxRows: 10 }"></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="上传照片" prop="filePaths"
          :rules="{required: true, message: '请上传照片', trigger: ['change']}">
          <j-image-upload isMultiple class="image-upload" v-model="addForm.filePaths" bizPath="scott/pic"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import {
    memberList
  } from '@/api/sjsk/activity/group/detail/mature/table1'
  import {
    detail,
    add,
    update
  } from '@/api/sjsk/activity/group/detail/end/table7'
  import downloadXlsl from '../../downloadXlsx.js'
  export default {
    data() {
      return {
        addFormVisible: false,
        addFormTitle: '添加',
        addForm: {
          "activityId": 0,
          "activityContent": "",
          "filePaths": [],
          "photoIds": ""
        }
      }
    },
    created() {

    },

    methods: {
      download() {
        downloadXlsl(this.$route.query.id, 14)
      },
      onEditForm(data) {
        detail({
          activityId: this.$route.query.id
        }).then(res => {
          if(res.success) {
            if(res.result.photoDetail) {
              this.addForm.activityId = res.result.photoDetail.id
              this.addForm.activityContent = res.result.photoDetail.activityContent
            }
            if(res.result.fileList && res.result.fileList > 0 && photoDetail) {
              this.addForm.filePaths = res.result.fileList
              this.addForm.photoIds = res.result.fileList.map(i => {
                return i.id
              }).toString()
            }
            
          }
          this.addForm = res.result
          this.addFormVisible = true
        })

      },
      onAddSubmit() {
        const method = this.addFormTitle == '添加' ? add : update
        const form = JSON.parse(JSON.stringify(this.addForm))
        form.photoIds = form.filePaths
        form.filePaths = form.filePaths.split(',')
        this.$refs.addForm.validate().then(res => {
          method(form).then(res => {
            if (res.success) {
              this.$message.success(this.addFormTitle == '添加' ? '添加成功' : '保存成功')
              this.onAddFormCancel()
            } else {
              this.$message.error(res.message)
            }
          })
        })
      },
      onAddFormCancel() {
        this.addForm = {
          "activityId": '',
          "activityContent": "",
          "filePaths": [],
          "photoIds": ""
        }
        this.addFormVisible = false
      },
    }
  }
</script>

<style lang="less" scoped>
  .image-upload{
    
    /deep/ .ant-upload{
      width: 438px;
      height: 192px;
    }
  }
  .table1 {
    box-sizing: border-box;
    padding: 20px 30px;

    .btn-wrap {
      margin-bottom: 20px;
    }
  }
</style>
